<template>
	<view class="experience">
		<view class="container">
			<view class="header">
				<view class="nav"></view>
				<view class="content">
					<view class="con_bg">
						<image src="../../static/image/cover.png"></image>
					</view>
					<view class="con_text">
						<view class="title">
							<image src="../../static/image/advanced.png"></image>
							<view class="grade">高级匹配·体验</view>
							<view class="price">¥ {{Info.original_price}}</view>
						</view>
						<view class="hint">第二优先级，匹配成功率80%，匹配失败全额退款</view>
						<view class="box">
							<view class="price">
								<view>¥</view>
								<view>{{Info.experience_price}}</view>
							</view>
							<view class="time">
								<view v-if="!Info.is_end">
									<uni-countdown backgroundColor="none" style="width:140upx;" splitorColor="#FF8730"
										color="#FF8730" :show-day="false" :hour="Info.exp_hours"
										:minute="Info.exp_minutes" :second="Info.exp_seconds">
									</uni-countdown>后过期，请尽快使用
								</view>
								<view v-else>亲，您的体验卷已过期</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="pay">
					支付并报名
				</view>
				<view class="boxss">
					<wx-open-subscribe ref="subscribeBtn" :template="subTemplateId" id="subscribe-btn">
						<script type="text/wxtag-template">
							<style>.btn { padding: 12px}</style>
						    <button class="btn">
								点击点击点点击点击点
							</button>
						  </script>
					</wx-open-subscribe>
				</view>

				<view class="text">
					<view>默认使用当前资料报名，去</view>
					<view class="alter" @click="headleAlter">修改资料</view>
				</view>
			</view>
			<!-- 订阅模板 -->

		</view>
	</view>
</template>
<script>
	var jweixin = require('jweixin-module')
	export default {
		data() {
			return {
				Info: {}, //基本信息状态
				phase: null, //当前期数 
				subTemplateId: ['8Uvon-foP0PyW3TcbllqokQelmiqOnBctl8fTfwZJhY',
					'SKG6uQJdZlvsDS86ql9S78A6YL7Z207Je85-H9tZ8HE', '8Icdi9jQZfy9s1iJ0ke7UXuARS4o1qR0CX84ASDxuvY',
					'0uwnOICQYDtCNFYXXe71yiuIRKMx3xHZrSQjWBBftbk', '4kh2CXv0ZV9vjWkvq6Se3MTKY8AQYwylIqFb2yQfVBw'
				],
			}
		},
		onLoad(options) {
			this.phase = options.phase
			this.getInfo()


		},
		onReady() {
			let that = this
			jweixin.ready(function(res) {
				const btn = that.$refs.subscribeBtn
				btn.addEventListener('success', function(e) {
					let attend = false;
					let subscribeDetails = JSON.parse(e.detail.subscribeDetails);
					for (let i in that.subTemplateId) {
						let subKey = subscribeDetails[that.subTemplateId[i]];
						let status = JSON.parse(subKey);
						let type = false;
						switch (status.status) {
							case "reject":
								type = false;
								break;
							case "cancel":
								type = false;
								break;
							case "filter":
								type = false;
								break;
							default:
								type = true;
								break;
						}
						if (!type) {
							// 如果其中有一个模板没有订阅，则全部不通过过
							attend = false;
							break;
						} else {
							attend = true;
						}
					}
					if (!attend) {
						return;
					}
					uni.showToast({
						title: "加载中",
						mask: true,
						icon: "loading"
					})
					that.headlePayment()
				});

				btn.addEventListener('error', function(e) {
					alert("取消")
				});

			});
		},
		methods: {
			getConfig() {
				let that = this
				this.$myRequesyPay({
					url: 'user/get_config',
					method: "POST",
					data: {
						wechaturl: location.href.split('#')[0]
					}
				}).then(res => {
					if (res.err_code === 0) {
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
							appId: res.data.appId, // 必填，公众号的唯一标识
							timestamp: res.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.signature, // 必填，签名
							jsApiList: [], // 必填，需要使用的JS接口列表
							openTagList: ['wx-open-subscribe'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
						});

						jweixin.error(function(res) {

						});
					}
				})
			},

			// 获取基本信息状态
			getInfo() {
				this.$myRequesy({
					url: 'user/exp-coupon',
					data: {
						p_no: this.phase
					}
				}).then(res => {
					if (res.code === 0) {
						this.Info = res.data
					}
				})
			},


			//微信支付  体验卷 支付并报名
			headlePayment() {
				if (!this.Info.is_end) {
					let id = uni.getStorageSync('id')
					let that = this
					if (that.Time) {
						clearTimeout(that.Time)
					}
					that.Time = setTimeout(() => {
						that.$myRequesy({
							url: 'exp-pay',
							method: "POST",
							data: {
								p_no: that.phase
							},
						}).then(res => {
							if (res.code === 0) {
								WeixinJSBridge.invoke(
									'getBrandWCPayRequest', {
										"appId": res.data.appId, //公众号ID，由商户传入     
										"timeStamp": res.data.timeStamp, //时间戳，自1970年以来的秒数     
										"nonceStr": res.data.nonceStr, //随机串     
										"package": res.data.package,
										"signType": res.data.signType, //微信签名方式：     
										"paySign": res.data.paySign //微信签名 
									},
									function(res1) {
										if (res1.err_msg == "get_brand_wcpay_request:ok") {
											// 使用以上方式判断前端返回,微信团队郑重提示：
											//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
											that.$myRequesy({ //报名接口
												url: 'user/exp-regis',
												method: "POST",
												data: {
													order_no: res.data.out_trade_no,
													from_state: id || 0,
													p_no: that.phase
												}
											}).then(res => {
												if (res.code === 0) {
													uni.redirectTo({
														url: '../succeed/succeed'
													})
												}

											})
										}
									});
							} else if (res.code === 3005) {
								that.getInfo()
								uni.showToast({
									title: '体验卷已过期',
									icon: "none"
								})
							} else if (res.code === 3008) {
								uni.showToast({
									title: "假期期间，暂停报名！",
									icon: "none"
								})
							}
						})
					}, 500)
				}

			},
			headleAlter() {
				uni.navigateTo({
					url: '../myprofile/myprofile'
				})
			}
		}
	}
</script>

<style>
	.uni-countdown .uni-countdown__number {
		width: 30upx !important;
	}
</style>
<style lang="scss" scoped>
	.experience {
		.container {
			padding: 40upx 0upx;

			.header {
				position: relative;
				padding: 0upx 30upx;
				margin-bottom: 54upx;

				.nav {
					width: 690upx;
					height: 60upx;
					border-radius: 20upx;
					background-color: rgba(130, 113, 239, 100);
					text-align: center;
					box-shadow: 0px 0px 8upx 0px rgba(130, 113, 239, 100);
					border: 8upx solid rgba(16, 16, 16, 0.05);
				}

				.content {
					width: 650upx;
					height: 834upx;
					margin: -30upx auto 0upx;
					border-radius: 30upx;
					text-align: center;
					box-shadow: 0px 20upx 40upx 0px rgba(158, 149, 237, 0.30);

					.con_bg {
						width: 100%;
						height: 400upx;
						background-color: rgba(158, 149, 237, 100);
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 430upx;
							height: 240upx;
						}
					}


					.con_text {
						padding: 42upx 42upx 48upx 30upx;

						.title {
							display: flex;
							align-items: center;

							image {
								width: 50upx;
								height: 50upx;
							}

							.grade {
								color: rgba(0, 0, 0, 0.8);
								font-size: 36upx;
								font-weight: 600;
								margin: 0upx 20upx 0upx 10upx;
							}

							.price {
								color: rgba(0, 0, 0, 0.35);
								font-size: 26upx;
								text-decoration: line-through;
							}
						}

						.hint {
							color: rgba(255, 130, 35, 100);
							font-size: 26upx;
							margin: 10upx 0upx 30upx;
						}

						.box {
							color: rgba(255, 135, 48, 100);
							width: 100%;
							height: 220upx;
							border-radius: 24upx;
							background-color: rgba(255, 130, 35, 0.10);
							text-align: center;
							border: 2upx solid rgba(255, 130, 35, 0.30);
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.price {
								display: flex;
								align-items: center;
								margin-bottom: 14upx;
								margin-top: 20upx;
								color: rgba(255, 130, 35, 100);
								font-size: 28upx;

								view:last-child {
									font-size: 50upx;
									font-weight: 600;
									margin-left: 10upx;
								}
							}

							.time {
								color: rgba(255, 135, 48, 100);
								font-size: 24upx;

								view:first-child {
									display: flex;
									align-items: center;
								}
							}
						}
					}
				}
			}

			.footer {
				padding: 0upx 50upx;
				text-align: center;
				position: relative;

				.pay {
					width: 650upx;
					height: 90upx;
					line-height: 90upx;
					border-radius: 200upx;
					background-color: rgba(255, 135, 48, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 30upx;
					text-align: center;
					box-shadow: 0px 0px 4upx 0px rgba(255, 135, 48, 100);
					font-family: Arial;
					border: 2upx solid rgba(16, 16, 16, 0.05);
					font-weight: 700;
					margin-bottom: 30upx;
				}

				.text {
					color: rgba(0, 0, 0, 0.35);
					font-size: 28upx;

					view {
						display: inline-block;
					}

					.alter {
						color: #6755D9;
					}
				}
			}
		}

		.boxss {
			width: 86%;
			height: 100upx;
			opacity: 0;
			position: absolute;
			bottom: 62upx;
			right: 0;
			left: 52upx;
			z-index: 999;
		}
	}
</style>
